/** @jsx React.DOM */
define(function(require, exports, module) {
    var React = require('react');
    var {Link} = require('react-router');

    var Home = React.createClass({
        routeChanged: function routeChanged (event) {
            document.querySelector('.navbar-nav li.active').classList.remove('active');
            event.currentTarget.classList.add('active');
        },
        render: function render() {
            return (
                <div>
                    <nav className="navbar navbar-default navbar-fixed-top" role="navigator">
                        <div className="container-fluid">
                            <div className="navbar-header">
                                <button type="button" className="navbar-toggle collapsed">
                                    <span className="icon-bar"></span>
                                    <span className="icon-bar"></span>
                                    <span className="icon-bar"></span>
                                </button>
                                <a className="navbar-brand" href="">React Demo</a>
                            </div>
                            <div className="collapse navbar-collapse">
                                <ul className="nav navbar-nav">
                                    <li onClick={ this.routeChanged } className="active"><Link to="home">Home</Link></li>
                                    <li onClick={ this.routeChanged }><Link to="comment">Comment</Link></li>
                                    <li onClick={ this.routeChanged }><Link to="generator">Generator</Link></li>
                                </ul>
                            </div>
                        </div>
                    </nav>

                    <this.props.activeRouteHandler />
                </div>
            );
        }
    });
    module.exports = Home;
});